<template>
    <div class="bg">
        <div id="goBack">
            <el-button type="danger" class="startDraw" round @click="this.$router.push({path:'/qiantai'})">返回
            </el-button>
        </div>
        <!-- 抽奖转盘 -->
        <div id="myCanvasContainer">
            <canvas id="myCanvas" ref="canvas">
                <p>换个现代浏览器吧！</p>
            </canvas>
        </div>
        <div id="tags" style="display: none;">
            <ul>
                <li v-for="user in joinUser" :key="user.userId">
                    <a href="javascript: void(0);">
                        {{ user.userName }}
                    </a>
                </li>
            </ul>
        </div>
        <transition name="el-zoom-in-top">

            <div v-if="this.start===this.end" v-show="drawInfo" class="transition-box">
                <h4 style="margin-bottom: 10px">总中奖名单</h4>
                <div v-for="luck in this.luckUser" style="margin-bottom: 10px">
                    <h4 style="font-size: small">{{luck.title}}---{{luck.prizeName}}</h4>
                    <p v-for="user in luck.users" style="font-size: small">{{user.userId}}-{{user.userName}} </p>
                </div>

            </div>
            <div v-else v-show="drawInfo" class="transition-box">
                <h4>奖项名</h4>
                <p>{{this.start%2===1?this.luckUser[start-(start-parseInt(start/2))].title:''}}</p>
                <h4>奖品名</h4>
                <p>{{this.start%2===1?this.luckUser[start-(start-parseInt(start/2))].prizeName:''}}</p>
                <h4>中奖名单</h4>
                <p v-for="user in this.start%2===1?this.luckUser[start-(start-parseInt(start/2))].users:''">
                    {{user.userId}}-{{user.userName}}</p>
            </div>

        </transition>
        <!-- 底部操作台 -->
        <el-row justify="center">
            <el-col :xs="7" :sm="6" :md="4" :lg="3" :xl="2" v-if="authoritys.length > 0">
                <el-button type="danger" :disabled="startDisStyle" class="startDraw" round @click="startDraw">开始抽奖
                </el-button>
            </el-col>
            <el-col :xs="7" :sm="6" :md="4" :lg="3" :xl="2">
                <el-button type="danger" class="startDraw" round @click="dialogVisible = true">活动信息</el-button>
            </el-col>
            <el-col :xs="7" :sm="6" :md="4" :lg="3" :xl="2">
                <el-popover width="170" placement="top" trigger="click" style="width: 300px;height: 300px">
                    <template #reference>
                        <el-button type="danger" class="startDraw" round @click="openQRCode">中奖结果</el-button>
                    </template>
                    <el-image :src="QRCodeUrl" style="width: 150px;height: 150px;padding: 0;margin: 0"></el-image>
                </el-popover>
            </el-col>
            <!--          <el-button type="danger" class="startDraw" round @click="openQRCode">中奖结果</el-button>-->
        </el-row>
        <el-dialog
                title="活动信息"
                v-model="dialogVisible"
                width="400px"
                style="position: absolute;">
            <el-descriptions direction="vertical" :column="2" border>
                <el-descriptions-item label="活动名">{{this.drawInfoList.title}}</el-descriptions-item>
                <el-descriptions-item label="发布日期">{{this.drawInfoList.releaseTime}}</el-descriptions-item>
                <el-descriptions-item label="描述">{{this.drawInfoList.remark}}</el-descriptions-item>
                <el-descriptions-item label="活动状态"> {{this.drawInfoList.state===0?"已结束":"正在进行"}}</el-descriptions-item>
                <el-descriptions-item label="部门范围" :span="4">
                    <el-tag v-for="drawScope in this.drawInfoList.drawScope">{{drawScope.name}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item v-for="prize in this.drawInfoList.prizeList" label="活动奖项-奖品-人数" :span="4">
                    {{prize.title}}-{{prize.prizeName}}-{{prize.drawNum}}
                </el-descriptions-item>
            </el-descriptions>

        </el-dialog>
    </div>
</template>

<script>
    import "@/util/polyfill.min.js";
    import "@/util/tagcanvas.min.js";


    export default {
        data() {
            return {
                //二维码图片地址
                QRCodeUrl: '',
                dialogVisible: false,
                data: [],
                luckUser: [
                    {
                        prizeId: '',
                        drawId: '',
                        title: '',
                        prizeName: '',
                        users: [
                            {
                                id: '',
                                userId: '',
                                userName: ''
                            }
                        ]
                    }
                ],
                joinUser: [1, 2, 3],
                //活动详情信息
                drawInfoList: [],
                startDisStyle: true,
                drawInfo: false,
                start: 0,
                end: 2,
                intervalObj: null
            }
        },
        computed: {
            authoritys() {
                return this.$store.state.menus.permList
            },
        },

        watch: {
            joinUser: function (val) {
                // console.log(val); // 有数据
                this.$nextTick(() => {
                    this.init();
                });
            }
        },
        mounted() {
            // console.log(this.joinUser)
            var canvas = this.$refs.canvas;
            canvas.width = document.body.offsetWidth;
            canvas.height = document.body.offsetHeight - 85;
            // document.body.addEventListener('keyup', this.onKeyup)

        },

        methods: {
            //生成二维码
            openQRCode() {
              this.$axios.get("/draw/generateDrawInfoById/" + this.drawInfoList.id).then(res => {
                this.QRCodeUrl = res.data.data.base64Code
              })
            },

            //出结果
            getLuckDrawInfo() {
                this.drawInfo = !this.drawInfo;
                TagCanvas.SetSpeed('myCanvas', [this.drawInfo ? 1 : 5, 1]);
                if (++this.start === this.end) {
                    TagCanvas.SetSpeed('myCanvas', [1, 1]);
                    var that = this
                    setTimeout(function () {
                        that.drawInfo = true;
                        window.clearInterval(that.intervalObj)
                    }, 1500)
                }
            },
            //开始抽奖
            startDraw() {
                this.$axios.get("/draw/start/" + this.$route.params.id).then(res => {
                    this.luckUser = res.data.data
                    this.end = this.luckUser.length * 2
                    this.drawInfoList.state = 0;
                })
                this.startDisStyle = true;
                TagCanvas.SetSpeed('myCanvas', [5, 1]);
                this.intervalObj = setInterval(this.getLuckDrawInfo, 3500)
            },
            // 初始化
            init() {
                try {
                    TagCanvas.Start('myCanvas', 'tags', {
                        textFont: 'Impact,"Arial Black",sans-serif',
                        textColour: "#FFFF00",
                        dragControl: 1,
                        decel: 0.95,
                        textHeight: 20,
                        minSpeed: 0.01,
                        initial: [
                            0.5 * Math.random() + 0.01,
                            -(0.5 * Math.random() + 0.01),
                        ],
                    });
                } catch (e) {
                    // something went wrong, hide the canvas container
                    document.getElementById('myCanvasContainer').style.display = 'none';
                }
            },
        },
        created() {
            this.$axios.get("/draw/listDrawInfoByDrawId/" + this.$route.params.id).then(res => {
                this.drawInfoList = res.data.data
                this.joinUser = res.data.data.userList
                // console.log(res.data.data)
                if (this.drawInfoList.state === 1) {
                    this.startDisStyle = false
                }


            })
        }
    }

</script>

<style scoped>


    html,
    body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100vh;
    }

    .bg {
        background-image: url("../assets/img/draw_bg.png");
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
        position: relative;
    }

    #myCanvasContainer {
        display: flex;
    }

    #footer {
        /*background-color: #de3e2e;*/
    }

    .startDraw {
        background-color: gold;
        color: #de3e2e;
    }

    .transition-box {
        margin-left: 50%;
        z-index: 999;
        position: absolute;
        left: -200px;
        top: 100px;
        width: 400px;
        height: 400px;
        background-image: url("../assets/img/jieguo.png");
        padding: 95px;
        padding-top: 75px;
        text-align: center;
        /*background-color: aqua;*/
    }

    #goBack {
        z-index: 999;
        position: absolute;
        left: 10px;
        top: 10px;
    }

    .el-zoom-in-top-enter-to {
        transition: all 0.8s;
    }

    .el-zoom-in-top-enter-active {
        transition: all 0.8s;
    }

    .el-zoom-in-top-leave-to {
        transition: all 0.8s;
    }

    .el-zoom-in-top-leave-active {
        transition: all 0.8s;
    }


</style>
